<template>
  <div class="EmergencyDetail">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EDManagement' }">应急处置 </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/ResourceAllocation' }">资源调配</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: `/ResourceDispatchList?type=${applyType == 1 ? 'team' : applyType == 2 ? 'car' : applyType == 3 ? 'equipment' : 'material'}` }">{{applyType == 1 ? "队伍" : applyType == 2 ? "车辆" : applyType == 3 ? "装备" : "物资"}}派遣</el-breadcrumb-item>
        <el-breadcrumb-item>派遣详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="EmergencyDetail-center">
      <TimeLine :activities="activities" :title="'应急事件流程'" />
      <div class="EmergencyDetail-add">
        <div class="EmergencyDetail-titel">
          <div class="EmergencyDetail-top">{{applyType == 1 ? "队伍": applyType == 2 ? "车辆": applyType == 3 ? "装备":  applyType == 4 ? "物资":"" }}派遣详情</div>
          <div class="flexBetween">
            <div slot="title" class="flex">
              <div class="leftLine"></div>
              <div class="fontSize16">资源派遣进度</div>
            </div>
            <el-row>
              <el-button size="mini" @click="AddFh">返回</el-button>
            </el-row>
          </div>
        </div>
        <div class="padding10-0" v-if="applydatas.orderType== 'dispatched'">
          <div class="flexAround fontSize18 margin5-0">
            <div>派遣</div>
            <div>接收</div>
            <div>出发</div>
            <div>到达</div>
          </div>
          <el-steps :active="activeData.length" align-center>
            <el-step>
              <template slot="icon">
                <span class="yuandian1" :class="activeData.length > 0 ? 'ydBgcolor' : ''"></span>
              </template>
              <template slot="title">
                <div class="fontWeight textNowrap">{{activeData.length > 0 ? activeData[0].businessTime : ""}}</div>
              </template>
            </el-step>
            <el-step>
              <template slot="icon">
                <span class="yuandian1" :class="activeData.length > 1 ? 'ydBgcolor' : ''"></span>
              </template>
              <template slot="title">
                <div class="fontWeight textNowrap">{{activeData.length > 1 ? activeData[1].businessTime : ""}}</div>
              </template>
            </el-step>
            <el-step>
              <template slot="icon">
                <span class="yuandian1" :class="activeData.length > 2 ? 'ydBgcolor' : ''"></span>
              </template>
              <template slot="title">
                <div class="fontWeight textNowrap">{{activeData.length > 2 ? activeData[2].businessTime : ""}}</div>
              </template>
            </el-step>
            <el-step>
              <template slot="icon">
                <span class="yuandian1" :class="activeData.length > 3 ? 'ydBgcolor' : ''"></span>
              </template>
              <template slot="title">
                <div class="fontWeight textNowrap">{{activeData.length > 3 ? activeData[3].businessTime : ""}}</div>
              </template>
            </el-step>
          </el-steps>
        </div>
        <div class="padding10-0" v-if="applydatas.orderType== 'apply'">
          <div class="flexAround fontSize18 margin5-0">
            <div>申请</div>
            <div>审批</div>
            <div>派遣</div>
            <div>接收</div>
            <div>出发</div>
            <div>到达</div>
          </div>
          <el-steps :active="activeData.length" align-center>
            <el-step>
              <template slot="icon">
                <span class="yuandian1" :class="activeData.length > 0 ? 'ydBgcolor' : ''"></span>
              </template>
              <template slot="title">
                <div class="fontWeight textNowrap">{{activeData.length > 0 ? activeData[0].businessTime : ""}}</div>
              </template>
            </el-step>
            <el-step>
              <template slot="icon">
                <span class="yuandian1" :class="activeData.length > 1 ? 'ydBgcolor' : ''"></span>
              </template>
              <template slot="title">
                <div class="fontWeight textNowrap">{{activeData.length > 1 ? activeData[1].businessTime : ""}}</div>
              </template>
            </el-step>
            <el-step>
              <template slot="icon">
                <span class="yuandian1" :class="activeData.length > 2 ? 'ydBgcolor' : ''"></span>
              </template>
              <template slot="title">
                <div class="fontWeight textNowrap">{{activeData.length > 2 ? activeData[2].businessTime : ""}}</div>
              </template>
            </el-step>
            <el-step>
              <template slot="icon">
                <span class="yuandian1" :class="activeData.length > 3 ? 'ydBgcolor' : ''"></span>
              </template>
              <template slot="title">
                <div class="fontWeight textNowrap">{{activeData.length > 3 ? activeData[3].businessTime : ""}}</div>
              </template>
            </el-step>
            <el-step>
              <template slot="icon">
                <span class="yuandian1" :class="activeData.length > 4 ? 'ydBgcolor' : ''"></span>
              </template>
              <template slot="title">
                <div class="fontWeight textNowrap">{{activeData.length > 4 ? activeData[4].businessTime : ""}}</div>
              </template>
            </el-step>
            <el-step>
              <template slot="icon">
                <span class="yuandian1" :class="activeData.length > 5 ? 'ydBgcolor' : ''"></span>
              </template>
              <template slot="title">
                <div class="fontWeight textNowrap">{{activeData.length > 5 ? activeData[5].businessTime : ""}}</div>
              </template>
            </el-step>
          </el-steps>
        </div>
        <div class="EmergencyDetail-zt">
          <el-collapse v-model="activeNames">
            <el-collapse-item name="1">
              <div slot="title" class="title_box">
                <div class="flex">
                  <div class="leftLine"></div>
                  <div class="fontSize16">信息来源</div>
                </div>
                <div style="display:flex;align-items: center;">
                  <i :class="judgeActive('1')!==-1? 'downArrow1':'downArrow2'" />
                </div>
              </div>
              <div class="information_Sources_content">
                <div class="task_distribution">
                  <div class="labelDiv"> 响应命令单：</div><span @click="goSourceInfo(applydatas.sourceInfoId)">{{applydatas.sourceInfo}}</span>
                </div>
              </div>
            </el-collapse-item>
            <div v-if="applydatas.orderType== 'apply'">
              <el-collapse-item name="2">
                <div slot="title" class="title_box">
                  <div class="flex">
                    <div class="leftLine"></div>
                    <div class="fontSize16">申请信息</div>
                  </div>
                  <div style="display:flex;align-items: center;">
                    <i :class="judgeActive('2')!==-1? 'downArrow1':'downArrow2'" />
                  </div>
                </div>
                <div class="information_Sources_content">
                  <div class="task_distribution marginB15">
                    <div class="flex">
                      <div class="labelDiv"> 资源申请单：</div><span @click="goApplyDetail(applydatas.id)">{{applydatas.resourceApplyName}}</span>
                    </div>
                  </div>
                  <div class="task_distribution information">
                    <div class="flex">
                      <div class="labelDiv">申请单位：</div>
                      <div>{{applydatas.applyUnit}}</div>
                    </div>
                    <div class="flex">
                      <div class="labelDiv">需求等级：</div>
                      <div>{{applydatas.applyEvel === 3?"紧急":applydatas.applyEvel === 2?"一般":applydatas.applyEvel === 1?"普通":""}}</div>
                    </div>
                    <div class="flex" v-if="applyType == 1">
                      <div class="labelDiv">需求人数：</div>
                      <div>{{applydatas.peopleCount}}</div>
                    </div>
                    <div class="flex" v-else-if="applyType == 3 || 4">
                      <div class="labelDiv">需求数量总和：</div>
                      <div>{{applydatas.peopleCount}}</div>
                    </div>
                    <div class="flex">
                      <div class="labelDiv">受理单位及部门：</div>
                      <div>{{applydatas.acceptUnit}}</div>
                    </div>
                    <div class="flex">
                      <div class="labelDiv">目的地点：</div>
                      <div>{{applydatas.destination}}<img src="@/assets/img/position1.png" alt="" width="20" height="20"></div>
                    </div>
                    <div class="flex">
                      <div class="labelDiv">期望到达时间：</div>
                      <div>{{applydatas.expectArrivalTime}}</div>
                    </div>
                    <div class="flex">
                      <div class="labelDiv">联系人：</div>
                      <div>{{applydatas.contact}}</div>
                    </div>
                    <div class="flex">
                      <div class="labelDiv">联系方式：</div>
                      <div>{{applydatas.contactWay || '无'}}</div>
                    </div>
                  </div>
                  <div class="task_distribution marginB15">
                    <div style="display:flex;">
                      <div style="text-align:right" :class="applydatas.applyDescription && applydatas.applyDescription.length > 82 ? 'width176' : 'width150'">需求描述：</div>
                      <div>{{applydatas.applyDescription}}</div>
                    </div>
                  </div>
                  <div class="task_distribution information">
                    <div class="flex">
                      <div class="labelDiv">填报人：</div>
                      <div>{{applydatas.creator}}</div>
                    </div>
                    <div class="flex">
                      <div class="labelDiv">单位及部门：</div>
                      <div>{{applydatas.creatorUnit}}</div>
                    </div>
                    <div class="flex">
                      <div class="labelDiv">填报时间：</div>
                      <div>{{applydatas.createTime}}</div>
                    </div>
                    <div class="flex">
                      <div class="labelDiv">审批人：</div>
                      <div>{{applydatas.approvalUser}}</div>
                    </div>
                    <div class="flex">
                      <div class="labelDiv">单位及部门：</div>
                      <div>{{applydatas.approvalDept}}</div>
                    </div>
                    <div class="flex">
                      <div class="labelDiv">审批时间：</div>
                      <div>{{applydatas.approvalTime}}</div>
                    </div>
                  </div>
                </div>
              </el-collapse-item>
              <el-collapse-item name="3">
                <div slot="title" class="title_box">
                  <div class="flex">
                    <div class="leftLine"></div>
                    <div class="fontSize16">需求明细表</div>
                  </div>
                  <div style="display:flex;align-items: center;">
                    <i :class="judgeActive('3')!==-1? 'downArrow1':'downArrow2'" />
                  </div>
                </div>
                <div class="EmergencyList-table" v-if="applyType == 1">
                  <el-table border :header-cell-style="{ background:'#B1C8F9',color:'#000000', border: '1px solid #ccc'}" ref="multipleTable" :data="applydatas.tableData" max-height="500px" tooltip-effect="dark" style="width: 100%" size="small">
                    <el-table-column type="index" label="序号" width="80" align="center">
                    </el-table-column>
                    <el-table-column prop="teamTypeName" label="队伍类型" align="center">
                    </el-table-column>
                    <el-table-column prop="teamMajorName" label="队伍专业" align="center">
                    </el-table-column>
                    <el-table-column prop="memberMajorName" label="人员专业" align="center">
                    </el-table-column>
                    <el-table-column prop="memberAbilityName" label="特种作业能力" align="center">
                    </el-table-column>
                    <el-table-column prop="count" label="需求人数" align="center">
                    </el-table-column>
                    <el-table-column prop="remark" label="备注" align="center" width="500">
                    </el-table-column>
                  </el-table>
                </div>
                <div class="EmergencyList-table" v-else-if="applyType == 2">
                  <el-table border :header-cell-style="{ background:'#B1C8F9',color:'#000000', border: '1px solid #ccc'}" ref="multipleTable" :data="applydatas.tableData" max-height="500px" tooltip-effect="dark" style="width: 100%" size="small">
                    <el-table-column type="index" label="序号" width="80" align="center">
                    </el-table-column>
                    <el-table-column prop="vehiclePropertiesName" label="车辆性质" align="center">
                    </el-table-column>
                    <el-table-column prop="vehicleUsageName" label="车辆用途" align="center">
                    </el-table-column>
                    <el-table-column prop="vehicleTypeName" label="车辆类型" align="center">
                    </el-table-column>
                    <el-table-column prop="count" label="需求数量" align="center">
                    </el-table-column>
                  </el-table>
                </div>
                <div class="EmergencyList-table" v-else-if="applyType == 3">
                  <el-table border :header-cell-style="{ background:'#B1C8F9',color:'#000000', border: '1px solid #ccc'}" ref="multipleTable" :data="applydatas.tableData" max-height="500px" tooltip-effect="dark" style="width: 100%" size="small">
                    <el-table-column type="index" label="序号" width="80" align="center">
                    </el-table-column>
                    <el-table-column prop="largeCategoryName" label="装备大类" align="center">
                    </el-table-column>
                    <!-- <el-table-column prop="middleCategoryName" label="装备中类" align="center">
                    </el-table-column> -->
                    <el-table-column prop="smallCategoryName" label="装备小类" align="center">
                    </el-table-column>
                    <el-table-column prop="parametersName" label="型号参数" align="center">
                    </el-table-column>
                    <el-table-column prop="count" label="需求数量" align="center">
                    </el-table-column>
                  </el-table>
                </div>
                <div class="EmergencyList-table" v-else-if="applyType == 4">
                  <el-table border :header-cell-style="{ background:'#B1C8F9',color:'#000000', border: '1px solid #ccc'}" ref="multipleTable" :data="applydatas.tableData" max-height="500px" tooltip-effect="dark" style="width: 100%" size="small">
                    <el-table-column type="index" label="序号" width="80" align="center">
                    </el-table-column>
                    <el-table-column prop="largeCategoryName" label="物资大类" align="center">
                    </el-table-column>
                    <el-table-column prop="middleCategoryName" label="物资中类" align="center">
                    </el-table-column>
                    <el-table-column prop="smallCategoryName" label="物资小类" align="center">
                    </el-table-column>
                    <el-table-column prop="count" label="需求数量" align="center">
                    </el-table-column>
                  </el-table>
                </div>
              </el-collapse-item>
              <el-collapse-item name="4" v-if="isShow[0]">
                <div slot="title" class="title_box">
                  <div class="flex">
                    <div class="leftLine"></div>
                    <div class="fontSize16">省公司派遣信息</div>
                  </div>
                  <div style="display:flex;align-items: center;">
                    <i :class="judgeActive('4')!==-1? 'downArrow1':'downArrow2'" />
                  </div>
                </div>
                <div class="information_Sources_content">
                  <div class="information_Sources_content">
                    <div class="task_distribution marginB15">
                      <div class="flex">
                        <div class="labelDiv">资源派遣单：</div>
                        <div>{{applydatas.resourceDispatchedName}}</div>
                      </div>
                    </div>
                  </div>
                  <div class="task_distribution information">
                    <div class="flex">
                      <div class="labelDiv">责任单位及部门：</div>
                      <div>{{shengdatas.dutyUnit}}</div>
                    </div>
                    <div class="flex">
                      <div class="labelDiv">责任人：</div>
                      <div>{{shengdatas.dutyPerson}}</div>
                    </div>
                    <div v-if="!shengdatas.dispatchedNum"></div>
                    <div class="flex" v-if="shengdatas.teamName">
                      <div class="labelDiv">队伍名称：</div>
                      <div>{{shengdatas.teamName}}</div>
                    </div>
                    <div class="flex" v-if="shengdatas.warehouseName">
                      <div class="labelDiv">仓库名称：</div>
                      <div>{{shengdatas.warehouseName}}</div>
                    </div>
                    <div class="flex" v-if="shengdatas.teamType">
                      <div class="labelDiv">队伍类型：</div>
                      <div>{{shengdatas.teamType}}</div>
                    </div>
                    <div class="flex" v-if="shengdatas.teamMajor">
                      <div class="labelDiv">队伍专业：</div>
                      <div>{{shengdatas.teamMajor}}</div>
                    </div>
                    <div class="flex" v-if="shengdatas.warehouseContact">
                      <div class="labelDiv">仓库联系人：</div>
                      <div>{{shengdatas.warehouseContact}}</div>
                    </div>
                    <div class="flex" v-if="shengdatas.warehouseContactWay">
                      <div class="labelDiv">联系方式：</div>
                      <div>{{shengdatas.warehouseContactWay || '无'}}</div>
                    </div>
                    <div class="flex" v-if="shengdatas.dispatchedNum">
                      <div class="labelDiv">{{this.applyType == 1? '队伍人数：' : '调配数量总和：'}}</div>
                      <div>{{shengdatas.dispatchedNum}}</div>
                    </div>
                    <div class="flex">
                      <div class="labelDiv">派遣人：</div>
                      <div>{{shengdatas.creator}}</div>
                    </div>
                    <div class="flex">
                      <div class="labelDiv">单位及部门：</div>
                      <div>{{shengdatas.creatorUnit}}</div>
                    </div>
                    <div class="flex">
                      <div class="labelDiv">派遣时间：</div>
                      <div>{{shengdatas.createTime}}</div>
                    </div>
                  </div>
                </div>
              </el-collapse-item>
              <el-collapse-item name="5" v-if="isShow[1]">
                <div slot="title" class="title_box">
                  <div class="flex">
                    <div class="leftLine"></div>
                    <div class="fontSize16">地市级派遣信息</div>
                  </div>
                  <div style="display:flex;align-items: center;">
                    <i :class="judgeActive('5')!==-1? 'downArrow1':'downArrow2'" />
                  </div>
                </div>
                <div class="information_Sources_content">
                  <div class="information_Sources_content" v-if="!shengdatas.isSend">
                    <div class="task_distribution marginB15">
                      <div class="flex">
                        <div class="labelDiv">资源派遣单：</div>
                        <div>{{applydatas.resourceDispatchedName}}</div>
                      </div>
                    </div>
                  </div>
                  <div class="task_distribution information">
                    <div class="flex">
                      <div class="labelDiv">责任单位及部门：</div>
                      <div>{{shidatas.dutyUnit}}</div>
                    </div>
                    <div class="flex">
                      <div class="labelDiv">责任人：</div>
                      <div>{{shidatas.dutyPerson}}</div>
                    </div>
                    <div v-if="!shidatas.dispatchedNum"></div>
                    <div class=" flex" v-if="shidatas.teamName">
                      <div class="labelDiv">队伍名称：</div>
                      <div>{{shidatas.teamName}}</div>
                    </div>
                    <div class="flex" v-if="shidatas.warehouseName">
                      <div class="labelDiv">仓库名称：</div>
                      <div>{{shidatas.warehouseName}}</div>
                    </div>
                    <div class="flex" v-if="shidatas.teamType">
                      <div class="labelDiv">队伍类型：</div>
                      <div>{{shidatas.teamType}}</div>
                    </div>
                    <div class="flex" v-if="shidatas.teamMajor">
                      <div class="labelDiv">队伍专业：</div>
                      <div>{{shidatas.teamMajor}}</div>
                    </div>
                    <div class="flex" v-if="shidatas.warehouseContact">
                      <div class="labelDiv">仓库联系人：</div>
                      <div>{{shidatas.warehouseContact}}</div>
                    </div>
                    <div class="flex" v-if="shidatas.warehouseContactWay">
                      <div class="labelDiv">联系方式：</div>
                      <div>{{shidatas.warehouseContactWay || '无'}}</div>
                    </div>
                    <div class="flex" v-if="shidatas.dispatchedNum">
                      <div class="labelDiv">{{this.applyType == 1? '队伍人数：' : '调配数量总和：'}}</div>
                      <div>{{shidatas.dispatchedNum}}</div>
                    </div>
                    <div class="flex">
                      <div class="labelDiv">派遣人：</div>
                      <div>{{shidatas.creator}}</div>
                    </div>
                    <div class="flex">
                      <div class="labelDiv">单位及部门：</div>
                      <div>{{shidatas.creatorUnit}}</div>
                    </div>
                    <div class="flex">
                      <div class="labelDiv">派遣时间：</div>
                      <div>{{shidatas.createTime}}</div>
                    </div>
                  </div>
                </div>
              </el-collapse-item>
              <el-collapse-item name="6" v-if="isShow[2]">
                <div slot="title" class="title_box">
                  <div class="flex">
                    <div class="leftLine"></div>
                    <div class="fontSize16">区县级派遣信息</div>
                  </div>
                  <div style="display:flex;align-items: center;">
                    <i :class="judgeActive('6')!==-1? 'downArrow1':'downArrow2'" />
                  </div>
                </div>
                <div class="information_Sources_content">
                  <div class="information_Sources_content" v-if="!shidatas.isSend">
                    <div class="task_distribution marginB15">
                      <div class="flex">
                        <div class="labelDiv">资源派遣单：</div>
                        <div>{{applydatas.resourceDispatchedName}}</div>
                      </div>
                    </div>
                  </div>
                  <div class="task_distribution information">
                    <div class="flex">
                      <div class="labelDiv">责任单位及部门：</div>
                      <div>{{qudatas.dutyUnit}}</div>
                    </div>
                    <div class="flex">
                      <div class="labelDiv">责任人：</div>
                      <div>{{qudatas.dutyPerson}}</div>
                    </div>
                    <div class="flex" v-if="qudatas.teamName">
                      <div class="labelDiv">队伍名称：</div>
                      <div>{{qudatas.teamName}}</div>
                    </div>
                    <div class="flex" v-if="qudatas.warehouseName">
                      <div class="labelDiv">仓库名称：</div>
                      <div>{{qudatas.warehouseName}}</div>
                    </div>
                    <div class="flex" v-if="qudatas.teamType">
                      <div class="labelDiv">队伍类型：</div>
                      <div>{{qudatas.teamType}}</div>
                    </div>
                    <div class="flex" v-if="qudatas.teamMajor">
                      <div class="labelDiv">队伍专业：</div>
                      <div>{{qudatas.teamMajor}}</div>
                    </div>
                    <div class="flex" v-if="qudatas.warehouseContact">
                      <div class="labelDiv">仓库联系人：</div>
                      <div>{{qudatas.warehouseContact}}</div>
                    </div>
                    <div class="flex" v-if="qudatas.warehouseContactWay">
                      <div class="labelDiv">联系方式：</div>
                      <div>{{qudatas.warehouseContactWay || '无'}}</div>
                    </div>
                    <div class="flex" v-if="qudatas.dispatchedNum">
                      <div class="labelDiv">{{this.applyType == 1? '队伍人数：' : '调配数量总和：'}}</div>
                      <div>{{qudatas.dispatchedNum}}</div>
                    </div>
                    <div class="flex">
                      <div class="labelDiv">派遣人：</div>
                      <div>{{qudatas.creator}}</div>
                    </div>
                    <div class="flex">
                      <div class="labelDiv">单位及部门：</div>
                      <div>{{qudatas.creatorUnit}}</div>
                    </div>
                    <div class="flex">
                      <div class="labelDiv">派遣时间：</div>
                      <div>{{qudatas.createTime}}</div>
                    </div>
                  </div>
                </div>
              </el-collapse-item>
            </div>
            <div v-if="applydatas.orderType== 'dispatched'">
              <el-collapse-item name="2">
                <div slot="title" class="title_box">
                  <div class="flex">
                    <div class="leftLine"></div>
                    <div class="fontSize16">任务信息</div>
                  </div>
                  <div style="display:flex;align-items: center;">
                    <i :class="judgeActive('2')!==-1? 'downArrow1':'downArrow2'" />
                  </div>
                </div>
                <div class="information_Sources_content">
                  <div class="task_distribution information">
                    <div class="flex">
                      <div class="labelDiv">任务地点：</div>
                      <div>{{applydatas.destination}}</div>
                    </div>
                    <div class="flex">
                      <div class="labelDiv">期望到达时间：</div>
                      <div>{{applydatas.expectArrivalTime}}</div>
                    </div>
                  </div>
                  <div class="task_distribution marginB15">
                    <div style="display:flex;">
                      <div style="text-align:right" :class="applydatas.applyDescription && applydatas.applyDescription.length > 82  ? 'width176' : 'width150'">任务内容：</div>
                      <div>{{applydatas.applyDescription}}</div>
                    </div>
                  </div>
                  <div class="task_distribution information">
                    <div class="flex">
                      <div class="labelDiv">接收单位：</div>
                      <div>{{applydatas.acceptUnit}}</div>
                    </div>
                    <div class="flex">
                      <div class="labelDiv">联系人：</div>
                      <div>{{applydatas.contact}}</div>
                    </div>
                    <div class="flex">
                      <div class="labelDiv">联系方式：</div>
                      <div>{{applydatas.contactWay || "无"}}</div>
                    </div>
                  </div>
                </div>
              </el-collapse-item>
              <el-collapse-item name="3">
                <div slot="title" class="title_box">
                  <div class="flex">
                    <div class="leftLine"></div>
                    <div class="fontSize16">派遣信息</div>
                  </div>
                  <div style="display:flex;align-items: center;">
                    <i :class="judgeActive('3')!==-1? 'downArrow1':'downArrow2'" />
                  </div>
                </div>
                <div class="information_Sources_content">
                  <div class="information_Sources_content">
                    <div class="task_distribution marginB15">
                      <div class="flex">
                        <div class="labelDiv">资源派遣单：</div>
                        <div>{{newsdatas.resourceDispatchedName}}</div>
                      </div>
                    </div>
                  </div>
                  <div class="task_distribution information">
                    <div class="flex">
                      <div class="labelDiv">责任单位及部门：</div>
                      <div>{{newsdatas.dutyUnit}}</div>
                    </div>
                    <div class="flex">
                      <div class="labelDiv">责任人：</div>
                      <div>{{newsdatas.dutyPerson}}</div>
                    </div>
                    <div v-if="!newsdatas.dispatchedNum"></div>
                    <div class=" flex" v-if="newsdatas.teamName">
                      <div class="labelDiv">队伍名称：</div>
                      <div>{{newsdatas.teamName}}</div>
                    </div>
                    <div class="flex" v-if="newsdatas.warehouseName">
                      <div class="labelDiv">仓库名称：</div>
                      <div>{{newsdatas.warehouseName}}</div>
                    </div>
                    <div class="flex" v-if="newsdatas.teamType">
                      <div class="labelDiv">队伍类型：</div>
                      <div>{{newsdatas.teamType}}</div>
                    </div>
                    <div class="flex" v-if="newsdatas.teamMajor">
                      <div class="labelDiv">队伍专业：</div>
                      <div>{{newsdatas.teamMajor}}</div>
                    </div>
                    <div class="flex" v-if="newsdatas.warehouseContact">
                      <div class="labelDiv">仓库联系人：</div>
                      <div>{{newsdatas.warehouseContact}}</div>
                    </div>
                    <div class="flex" v-if="newsdatas.warehouseContactWay">
                      <div class="labelDiv">联系方式：</div>
                      <div>{{newsdatas.warehouseContactWay || '无'}}</div>
                    </div>
                    <div class="flex" v-if="newsdatas.dispatchedNum">
                      <div class="labelDiv">{{this.applyType == 1? '队伍人数：' : '调配数量总和：'}}</div>
                      <div>{{newsdatas.dispatchedNum}}</div>
                    </div>
                    <div class="flex">
                      <div class="labelDiv">派遣人：</div>
                      <div>{{newsdatas.creator}}</div>
                    </div>
                    <div class="flex">
                      <div class="labelDiv">单位及部门：</div>
                      <div>{{newsdatas.creatorUnit}}</div>
                    </div>
                    <div class="flex">
                      <div class="labelDiv">派遣时间：</div>
                      <div>{{newsdatas.createTime}}</div>
                    </div>
                  </div>
                </div>
              </el-collapse-item>
            </div>
            <el-collapse-item name="7" v-if="applydatas.orderType== 'dispatched'">
              <div slot="title" class="title_box">
                <div class="flex">
                  <div class="leftLine"></div>
                  <div class="fontSize16">审批信息</div>
                </div>
                <div style="display:flex;align-items: center;">
                  <i :class="judgeActive('7')!==-1? 'downArrow1':'downArrow2'" />
                </div>
              </div>
              <div class="information_Sources_content">
                <div style="display:flex;" class="marginB15">
                  <div style="width:150px;text-align:right">审批意见：</div>
                  <div>{{applydatas.dispatchedApprovalOpinion}}</div>
                </div>
                <div class="task_distribution information">
                  <div class="flex">
                    <div class="labelDiv">审批人：</div>
                    <div>{{applydatas.dispatchedApprovalUser}}</div>
                  </div>
                  <div class="flex">
                    <div class="labelDiv">单位及部门：</div>
                    <div>{{applydatas.dispatchedApprovalDept}}</div>
                  </div>
                  <div class="flex">
                    <div class="labelDiv">审批时间：</div>
                    <div>{{applydatas.dispatchedApprovalTime}}</div>
                  </div>
                </div>
              </div>
            </el-collapse-item>
            <el-collapse-item name="8" v-if="applyType == 1">
              <div slot="title" class="title_box">
                <div class="flex">
                  <div class="leftLine"></div>
                  <div class="fontSize16">人员明细表</div>
                </div>
                <div style="display:flex;align-items: center;">
                  <i :class="judgeActive('8')!==-1? 'downArrow1':'downArrow2'" />
                </div>
              </div>
              <div class="EmergencyList-table marginT10" v-for="(items,indexs) in dispatchdatas.tableData" :key="indexs">
                <div class="task_distribution information">
                  <div class="flex">
                    <div class="labelDiv">队伍名称：</div>
                    <div>{{items.teamName}}</div>
                  </div>
                  <div class="flex">
                    <div class="labelDiv">队伍类型：</div>
                    <div>{{items.teamType}}</div>
                  </div>
                  <div class="flex">
                    <div class="labelDiv">队伍专业：</div>
                    <div>{{items.teamMajor}}</div>
                  </div>
                </div>
                <el-table border :header-cell-style="{ background:'#B1C8F9',color:'#000000', border: '1px solid #ccc'}" ref="multipleTable" :data="items.memberSaveDtoList" max-height="500px" tooltip-effect="dark" style="width: 100%" size="small">
                  <el-table-column type="index" label="序号" width="80" align="center">
                  </el-table-column>
                  <el-table-column prop="unit" label="所属单位" width="240" align="center">
                  </el-table-column>
                  <!-- <el-table-column prop="teamName" label="队伍名称" align="center">
                  </el-table-column> -->
                  <el-table-column prop="name" label="姓名" align="center">
                  </el-table-column>
                  <el-table-column prop="contact" label="联系方式" align="center">
                  </el-table-column>
                  <el-table-column prop="memberType" label="人员类型" align="center">
                  </el-table-column>
                  <el-table-column prop="memberMajor" label="人员专业" align="center">
                  </el-table-column>
                  <el-table-column prop="memberAbility" label="特种作业能力" align="center">
                  </el-table-column>
                  <el-table-column prop="accessTerm" label="准入期限" align="center">
                  </el-table-column>
                  <el-table-column label="操作" align="center">
                    <template>
                      <img src="@/assets/img/position.png" alt="" width="20" height="20">
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-collapse-item>
            <el-collapse-item name="8" v-if="applyType == 2">
              <div slot="title" class="title_box">
                <div class="flex">
                  <div class="leftLine"></div>
                  <div class="fontSize16">车辆明细表</div>
                </div>
                <div style="display:flex;align-items: center;">
                  <i :class="judgeActive('8')!==-1? 'downArrow1':'downArrow2'" />
                </div>
              </div>
              <div class="EmergencyList-table">
                <el-table border :header-cell-style="{ background:'#B1C8F9',color:'#000000', border: '1px solid #ccc'}" ref="multipleTable" :data="dispatchdatas.tableData" max-height="500px" tooltip-effect="dark" style="width: 100%" size="small">
                  <el-table-column type="index" label="序号" width="80" align="center">
                  </el-table-column>
                  <el-table-column prop="unit" label="所属单位" align="center">
                  </el-table-column>
                  <el-table-column prop="vehicleProperties" label="车辆性质" align="center">
                  </el-table-column>
                  <el-table-column prop="vehicleUsage" label="车辆用途" align="center">
                  </el-table-column>
                  <el-table-column prop="vehicleType" label="车辆类型" align="center">
                  </el-table-column>
                  <el-table-column prop="vehicleNum" label="车牌号" align="center">
                  </el-table-column>
                  <el-table-column prop="driver" label="驾驶员" align="center">
                  </el-table-column>
                  <el-table-column prop="contact" label="联系方式" align="center">
                  </el-table-column>
                  <el-table-column label="操作" min-width="80" align="center">
                    <template>
                      <img src="@/assets/img/position.png" alt="" width="20" height="20">
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-collapse-item>
            <el-collapse-item name="8" v-if="applyType == 3">
              <div slot="title" class="title_box">
                <div class="flex">
                  <div class="leftLine"></div>
                  <div class="fontSize16">装备明细表</div>
                </div>
                <div style="display:flex;align-items: center;">
                  <i :class="judgeActive('8')!==-1? 'downArrow1':'downArrow2'" />
                </div>
              </div>
              <div class="EmergencyList-table">
                <el-table border :header-cell-style="{ background:'#B1C8F9',color:'#000000', border: '1px solid #ccc'}" ref="multipleTable" :data="dispatchdatas.tableData" max-height="500px" tooltip-effect="dark" style="width: 100%" size="small">
                  <el-table-column type="index" label="序号" width="80" align="center">
                  </el-table-column>
                  <el-table-column prop="warehouse" label="所属仓库" align="center" width="220">
                  </el-table-column>
                  <el-table-column prop="largeCategory" label="装备大类" align="center">
                  </el-table-column>
                  <!-- <el-table-column prop="middleCategory" label="装备中类" align="center">
                  </el-table-column> -->
                  <el-table-column prop="smallCategory" label="装备小类" align="center">
                  </el-table-column>
                  <el-table-column prop="equipName" label="装备名称" align="center" width="220">
                  </el-table-column>
                  <el-table-column prop="requireCount" label="数量" align="center">
                  </el-table-column>
                  <el-table-column prop="equipStatus" label="状态" align="center">
                  </el-table-column>
                  <el-table-column label="生产日期" min-width="120" align="center">
                    <template slot-scope="scope">{{ scope.row.manufactureDate }}</template>
                  </el-table-column>
                </el-table>
              </div>
            </el-collapse-item>
            <el-collapse-item name="8" v-if="applyType == 4">
              <div slot="title" class="title_box">
                <div class="flex">
                  <div class="leftLine"></div>
                  <div class="fontSize16">物资明细表</div>
                </div>
                <div style="display:flex;align-items: center;">
                  <i :class="judgeActive('8')!==-1? 'downArrow1':'downArrow2'" />
                </div>
              </div>
              <div class="fontSize18 fontWeight textCenter">2021-08-13应急物资调拨单</div>
              <el-row>
                <el-col :span="2">
                  <div class="grid-content">单号：</div>
                </el-col>
                <el-col :span="3">
                  <div class="grid-content">2021YJ08SZ</div>
                </el-col>
                <el-col :span="3">
                  <div class="grid-content">申请单位：</div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content">国网随州供电公司</div>
                </el-col>
                <el-col :span="3">
                  <div class="grid-content">事件代号：</div>
                </el-col>
                <el-col :span="9">
                  <div class="grid-content">国网湖北省电力有限公司随州地区暴雨应急响应</div>
                </el-col>
              </el-row>
              <div class="EmergencyList-table">
                <el-table :span-method="objectSpanMethod" border :header-cell-style="{background:'#F0F2F5',color:'#000000'}" ref="multipleTable" :data="dispatchdatas.tableData" max-height="500px" :row-class-name="tableRowClassName" size="small">
                  <el-table-column type="index" label="需求信息" align="center">
                    <el-table-column type="index" label="序号" width="80" align="center">
                    </el-table-column>
                    <el-table-column prop="glxymld" label="采购申请" align="center">
                    </el-table-column>
                    <el-table-column prop="xqlb" label="行" align="center">
                    </el-table-column>
                    <el-table-column prop="yjjb" label="物料编码" align="center">
                    </el-table-column>
                    <el-table-column prop="yxfw" label="物料描述" align="center">
                    </el-table-column>
                  </el-table-column>
                  <el-table-column type="index" label="供应信息" align="center">
                    <el-table-column prop="date" label="单位" align="center">
                    </el-table-column>
                    <el-table-column prop="lxr" label="需求数量" align="center">
                    </el-table-column>
                    <el-table-column prop="name" label="供应方式" align="center">
                    </el-table-column>
                    <el-table-column prop="name" label="调出仓库名称" align="center">
                    </el-table-column>
                    <el-table-column prop="name" label="仓库联系人" align="center">
                    </el-table-column>
                    <el-table-column prop="name" label="联系方式" align="center">
                    </el-table-column>
                    <el-table-column label="要求交货时间" min-width="120" align="center">
                      <template slot-scope="scope">{{ scope.row.address }}</template>
                    </el-table-column>
                    <el-table-column prop="name" label="交货地点" align="center">
                    </el-table-column>
                    <el-table-column prop="" label="备注" align="center">
                    </el-table-column>
                  </el-table-column>
                </el-table>
              </div>
              <el-row>
                <el-col :span="5">
                  <div class="grid-content top_col">收货人</div>
                </el-col>
                <el-col :span="19">
                  <div class="grid-content top_col">王自如 18813956986</div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="5">
                  <div class="grid-content bottom_col">调配单位</div>
                </el-col>
                <el-col :span="19">
                  <div class="grid-content bottom_col">国网孝感供电公司</div>
                </el-col>
              </el-row>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TimeLine from "@/components/component/timeLine.vue";
import { GetDispacthDetail, GetApplyAction } from "@/api/EmergencyDisposal/zydp.js";
import { GetFlowList } from "@/api/common.js";
export default {
  name: "EmergencyDetail",
  components: { TimeLine },
  data() {
    return {
      // 申请单过来的申请明细
      applydatas: {
        tableData: []
      },
      // 新增派遣的申请明细
      dispatchdatas: {
        tableData: []
      },
      isShow: [false, false, false],
      // 省级派遣信息
      shengdatas: {
      },
      // 市级派遣信息
      shidatas: {
      },
      // 区级派遣信息
      qudatas: {
      },
      // 新增派遣的派遣信息
      newsdatas: {},
      // 顶部进度条
      activeData: [],
      applyType: 0, // 资源类型
      activeNames: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
      // 时间轴
      activities: [
      ]
    };
  },
  mounted() {
    this.applyType = this.$route.query.type;
    this.GetDispacthDetails(this.$route.query.id);
    this.GetApplyActions(this.$route.query.id);

  },
  methods: {
    judgeActive(data) {
      return this.activeNames.indexOf(data);
    },
    async GetDispacthDetails(id) {
      const res = await GetDispacthDetail({ id });
      const { applyDetailVo, dispatchedDetailVoList } = res;
      const flows = await GetFlowList({ sourceInfoId: applyDetailVo.sourceInfoId });
      this.activities = flows.data;
      if (applyDetailVo.orderType === "dispatched") { // 新增的派遣单
        this.newsdatas = dispatchedDetailVoList[0];
        this.TypeFL(dispatchedDetailVoList, 0);
      } else {
        if (dispatchedDetailVoList.length === 1) {
          if (applyDetailVo.acceptLevel === 1) {
            this.shengdatas = dispatchedDetailVoList[0];
            this.isShow[0] = true;
          } else if (applyDetailVo.acceptLevel === 2) {
            this.shidatas = dispatchedDetailVoList[0];
            this.isShow[1] = true;
          }
          // else if (applyDetailVo.acceptLevel === 3) {
          //   this.qudatas = dispatchedDetailVoList[0];
          //   this.isShow[2] = true;
          // }

          this.TypeFL(dispatchedDetailVoList, 0);
        } else if (dispatchedDetailVoList.length === 2) {
          if (applyDetailVo.acceptLevel === 1) { // 省到地市
            this.shengdatas = dispatchedDetailVoList[0];
            this.shidatas = dispatchedDetailVoList[1];
            this.isShow[0] = true;
            this.isShow[1] = true;

          } else if (applyDetailVo.acceptLevel === 2) {
            this.shidatas = dispatchedDetailVoList[0];
            this.qudatas = dispatchedDetailVoList[1];
            this.isShow[1] = true;
            this.isShow[2] = true;

          }
          console.log(this.isShow);
          this.TypeFL(dispatchedDetailVoList, 1);
        }
      }
      this.applydatas = applyDetailVo;
      if (this.applyType == 1) {
        this.applydatas.tableData = applyDetailVo.applyResourceTeamDetail;
      } else if (this.applyType == 2) {
        this.applydatas.tableData = applyDetailVo.applyResourceVehicleDetail;
      } else if (this.applyType == 3) {
        this.applydatas.tableData = applyDetailVo.applyResourceEquipDetail;
      } else if (this.applyType == 4) {
        this.applydatas.tableData = applyDetailVo.applyResourceSuppliesDetail;
      }

      console.log(this.dispatchdatas.tableData, "this.dispatchdatas.tableData");
    },
    TypeFL(dispatchedDetailVoList, index) {
      if (this.applyType == 1) {
        this.dispatchdatas.tableData = dispatchedDetailVoList[index].teamDetailVos;
      } else if (this.applyType == 2) {
        this.dispatchdatas.tableData = dispatchedDetailVoList[index].vehicleDetailVos;
      } else if (this.applyType == 3) {
        this.dispatchdatas.tableData = dispatchedDetailVoList[index].equipDetailVos;
      } else if (this.applyType == 4) {
        this.dispatchdatas.tableData = dispatchedDetailVoList[index].suppliesDetailVos;
      }
    },
    async GetApplyActions(id) {
      const res = await GetApplyAction({ businessId: id });
      this.activeData = res.data;
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1 || columnIndex === 9 || columnIndex === 10) {
        if (rowIndex % 5 === 0) {
          return {
            rowspan: 5,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 1) {
        return "white-row";
      }
      return "";
    },
    // 申请单详情
    goApplyDetail(id) {
      this.$router.push({
        name: "ResourceRequestDetail",
        query: { id: id, type: this.applyType }
      });
    },
    goSourceInfo(id) {
      // 命令单详情
      this.$router.push({
        name: "EmergencyResponseinfo",
        query: { id }
      });
    },
    // 返回上一级
    AddFh() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped lang="less">
.EmergencyDetail {
  width: 100%;
  height: 100%;
  .labelDiv {
    width: 150px;
    text-align: right;
  }
  :deep(.el-timeline) {
    width: 88%;
    margin-left: 35px;
    margin-top: 30px;
  }
  :deep(.el-breadcrumb__inner.is-link) {
    font-weight: 100;
    color: #fff;
  }
  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
    color: #3270ff;
  }
  :deep(.el-breadcrumb) {
    font-size: 16px;
  }
  .EmergencyDetail-center {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    .EmergencyDetail-add {
      width: 83%;
      height: 100%;
      background-color: #fff;
      border-radius: 5px;
      overflow: auto;
      .EmergencyDetail-titel {
        margin: 0 20px;
        position: relative;
        padding: 10px 0 5px 0;
        border-bottom: solid 1px #ccc;
        .EmergencyDetail-top {
          text-align: center;
          font-family: 微软雅黑;
          font-weight: 400;
          font-style: normal;
          font-size: 28px !important;
        }
      }
      .EmergencyDetail-zt {
        overflow-y: auto;
        margin: 0 20px;
        font-size: 16px;
        :deep(.el-button--text) {
          color: #606266;
          padding: 2px;
        }
        .EmergencyList-dialog-form-item {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
        }
        .task_distribution {
          display: flex;
          span {
            color: #3561fd;
            text-decoration: underline;
            cursor: pointer;
          }
        }
        .task_distribution.information {
          flex-wrap: wrap;
          > div {
            width: 33%;
            margin-bottom: 12px;
            align-items: center;
            img {
              position: relative;
              top: 5px;
              left: 10px;
            }
          }
        }
      }
    }
  }
}
:deep(.el-step__icon.is-text) {
  border: none;
}
:deep(.el-collapse-item__content) {
  padding-top: 5px;
  padding-bottom: 10px;
  font-size: 16px;
}
.yuandian1 {
  display: inline-block;
  background-color: #ccc;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.ydBgcolor {
  background-color: #246dfd;
  box-shadow: 0px 0px 8px 0px rgb(10, 99, 241);
}
.EmergencyList-table-pag {
  float: right;
  margin-top: 10px;
  > div {
    line-height: 32px;
  }
}
:deep(.el-table) {
  font-size: 16px;
  tr {
    > :last-child {
      padding: 0;
      img {
        display: block;
        margin: auto;
      }
    }
  }
  .white-row {
    background: #f0f2f5;
  }
}
:deep(.el-collapse-item__header) {
  border-bottom: 1px solid #ccc;
}
:deep(.el-collapse-item__content) {
  padding: 15px 0;
}
:deep(.el-collapse-item__wrap) {
  border: none;
}
.grid-content {
  background-color: #b1c8f9;
  border: 1px solid #d7d7d7;
  text-align: center;
  padding: 8px 0;
}
.grid-content.bottom_col {
  background-color: #f0f2f5;
  border: 1px solid #d7d7d7;
}
.grid-content.top_col {
  background-color: #fff;
  border-top: none;
  border-bottom: none;
}
.downArrow1 {
  // display: inline-block;
  // width: 15px;
  // height: 15px;
  // background-image: url("../../../../assets/img/downArrow1.png");
  // background-repeat: no-repeat;
  // background-size: 100% 100%;

  display: inline-block;
  width: 15px;
  height: 15px;
  background: url("../../../../assets/img/downArrow1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: rotate(-180deg);
}
.downArrow2 {
  // display: inline-block;
  // width: 15px;
  // height: 15px;
  // background: url("../../../../assets/img/downArrow1.png");
  // background-repeat: no-repeat;
  // background-size: 100% 100%;
  // transform: rotate(-180deg);

  display: inline-block;
  width: 15px;
  height: 15px;
  background-image: url("../../../../assets/img/downArrow1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.title_box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
:deep(.el-collapse-item__arrow) {
  display: none;
}
.width176 {
  width: 177px;
}
.width150 {
  width: 150px;
}
</style>
